<template>
  <div class="scenario-demo p-6">
    <!-- 页面标题 -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-white mb-4">
        {{ ts('多场景智能政策咨询演示') }}
      </h1>
      <p class="text-xl text-blue-200 mb-8">
        {{ ts('以人为核心，为不同类型用户提供个性化的政策咨询服务') }}
      </p>
      
      <!-- 核心统计 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="glass-card p-6 text-center">
          <div class="text-3xl font-bold text-electric-500 mb-2">15,000+</div>
          <div class="text-white text-sm">{{ ts('政策总数') }}</div>
        </div>
        <div class="glass-card p-6 text-center">
          <div class="text-3xl font-bold text-electric-500 mb-2">195个</div>
          <div class="text-white text-sm">{{ ts('覆盖国家') }}</div>
        </div>
        <div class="glass-card p-6 text-center">
          <div class="text-3xl font-bold text-electric-500 mb-2">50+</div>
          <div class="text-white text-sm">{{ ts('覆盖行业') }}</div>
        </div>
      </div>
    </div>

    <!-- 场景选择器 -->
    <div class="mb-12">
      <h2 class="text-2xl font-bold text-white mb-6 text-center">
        {{ ts('选择演示场景') }}
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div
          v-for="scenario in scenarios"
          :key="scenario.id"
          @click="selectedScenario = scenario"
          :class="[
            'scenario-card cursor-pointer p-6 rounded-lg border-2 transition-all duration-300 transform hover:scale-105',
            selectedScenario?.id === scenario.id
              ? 'border-electric-500 bg-electric-500/20'
              : 'border-white/20 bg-white/5 hover:border-electric-500/50'
          ]"
        >
          <div class="text-center">
            <div class="text-4xl mb-4">{{ scenario.avatar }}</div>
            <h3 class="text-white font-bold text-lg mb-2">{{ scenario.name }}</h3>
            <p class="text-blue-200 text-sm mb-4">{{ scenario.description }}</p>
            <div class="flex justify-center flex-wrap gap-2">
              <span
                v-for="tag in scenario.tags"
                :key="tag"
                class="px-2 py-1 bg-electric-500/20 text-electric-300 rounded text-xs"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 场景演示内容 -->
    <div v-if="selectedScenario" class="scenario-content">
      <!-- 用户档案 -->
      <div class="glass-card p-8 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <User class="w-8 h-8 mr-3 text-electric-500" />
          {{ ts('用户档案') }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="user-profile">
            <div class="flex items-center mb-6">
              <div class="w-20 h-20 bg-gradient-to-r from-electric-500 to-purple-500 rounded-full flex items-center justify-center text-4xl mr-6">
                {{ selectedScenario.avatar }}
              </div>
              <div>
                <h3 class="text-2xl font-bold text-white">{{ selectedScenario.profile.name }}</h3>
                <p class="text-blue-200">{{ selectedScenario.profile.position }}</p>
                <p class="text-white/70 text-sm">{{ selectedScenario.profile.company }}</p>
              </div>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h4 class="text-white font-semibold mb-2">{{ ts('背景描述') }}</h4>
              <p class="text-white/80 text-sm">{{ selectedScenario.profile.background }}</p>
            </div>
          </div>
          
          <div class="user-stats">
            <h4 class="text-white font-semibold mb-4">{{ ts('关键指标') }}</h4>
            <div class="grid grid-cols-2 gap-4">
              <div v-for="stat in selectedScenario.profile.stats" :key="stat.label" class="stat-item">
                <div class="bg-white/5 rounded-lg p-3 text-center">
                  <div class="text-lg font-bold text-electric-500">{{ stat.value }}</div>
                  <div class="text-white/70 text-sm">{{ stat.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 专属功能展示 -->
      <div class="glass-card p-8 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Zap class="w-8 h-8 mr-3 text-electric-500" />
          {{ ts('专属功能演示') }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div v-for="feature in selectedScenario.features" :key="feature.name" class="feature-card">
            <div class="bg-white/5 rounded-lg p-6 h-full">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-electric-500/20 rounded-lg flex items-center justify-center mr-4">
                  <component :is="feature.icon" class="w-6 h-6 text-electric-500" />
                </div>
                <h3 class="text-white font-semibold">{{ feature.name }}</h3>
              </div>
              <p class="text-white/80 text-sm mb-4">{{ feature.description }}</p>
              <div class="flex items-center justify-between">
                <span class="text-electric-500 text-sm">{{ ts('使用频率') }}</span>
                <span class="text-white font-semibold">{{ feature.usage }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 政策推荐示例 -->
      <div class="glass-card p-8 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Target class="w-8 h-8 mr-3 text-electric-500" />
          {{ ts('智能政策推荐') }}
        </h2>
        <div class="space-y-6">
          <div v-for="(recommendation, index) in selectedScenario.recommendations" :key="index">
            <div class="bg-white/5 rounded-lg p-6">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-white font-semibold text-lg">{{ recommendation.title }}</h3>
                <span 
                  :class="[
                    'px-3 py-1 rounded-full text-sm font-semibold',
                    recommendation.priority === 'high' ? 'bg-red-500/20 text-red-300' :
                    recommendation.priority === 'medium' ? 'bg-yellow-500/20 text-yellow-300' :
                    'bg-green-500/20 text-green-300'
                  ]"
                >
                  {{ recommendation.priority === 'high' ? ts('高优先级') : 
                     recommendation.priority === 'medium' ? ts('中优先级') : ts('低优先级') }}
                </span>
              </div>
              <p class="text-white/80 text-sm mb-4">{{ recommendation.description }}</p>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="text-center">
                  <div class="text-2xl font-bold text-electric-500">{{ recommendation.impact }}</div>
                  <div class="text-white/70 text-sm">{{ ts('影响程度') }}</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-green-400">{{ recommendation.benefit }}</div>
                  <div class="text-white/70 text-sm">{{ ts('预期收益') }}</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-yellow-400">{{ recommendation.timeline }}</div>
                  <div class="text-white/70 text-sm">{{ ts('实施周期') }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- AI助手对话示例 -->
      <div class="glass-card p-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <MessageSquare class="w-8 h-8 mr-3 text-electric-500" />
          {{ ts('AI助手对话示例') }}
        </h2>
        <div class="chat-simulation space-y-4">
          <div v-for="(message, index) in selectedScenario.chatDemo" :key="index">
            <div 
              :class="[
                'flex',
                message.sender === 'user' ? 'justify-end' : 'justify-start'
              ]"
            >
              <div 
                :class="[
                  'max-w-xs lg:max-w-md px-4 py-3 rounded-lg',
                  message.sender === 'user' 
                    ? 'bg-electric-500 text-white' 
                    : 'bg-white/10 text-white'
                ]"
              >
                <div class="text-sm">{{ message.content }}</div>
                <div class="text-xs opacity-70 mt-1">{{ message.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能对比表 -->
    <div class="glass-card p-8 mt-12">
      <h2 class="text-2xl font-bold text-white mb-6 text-center">
        {{ ts('功能对比表') }}
      </h2>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="border-b border-white/20">
              <th class="text-left text-white font-semibold py-4">{{ ts('功能') }}</th>
              <th class="text-center text-white font-semibold py-4">{{ ts('巴西投资经理') }}</th>
              <th class="text-center text-white font-semibold py-4">{{ ts('牛津博士') }}</th>
              <th class="text-center text-white font-semibold py-4">{{ ts('电商产业园') }}</th>
              <th class="text-center text-white font-semibold py-4">{{ ts('矿业企业') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="feature in featureComparison" :key="feature.name" class="border-b border-white/10">
              <td class="py-4 text-white">{{ feature.name }}</td>
              <td class="py-4 text-center">
                <CheckCircle v-if="feature.brazil" class="w-6 h-6 text-green-400 mx-auto" />
                <X v-else class="w-6 h-6 text-gray-400 mx-auto" />
              </td>
              <td class="py-4 text-center">
                <CheckCircle v-if="feature.oxford" class="w-6 h-6 text-green-400 mx-auto" />
                <X v-else class="w-6 h-6 text-gray-400 mx-auto" />
              </td>
              <td class="py-4 text-center">
                <CheckCircle v-if="feature.ecommerce" class="w-6 h-6 text-green-400 mx-auto" />
                <X v-else class="w-6 h-6 text-gray-400 mx-auto" />
              </td>
              <td class="py-4 text-center">
                <CheckCircle v-if="feature.mining" class="w-6 h-6 text-green-400 mx-auto" />
                <X v-else class="w-6 h-6 text-gray-400 mx-auto" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import {
  User,
  Zap,
  Target,
  MessageSquare,
  CheckCircle,
  X,
  BarChart3,
  MapPin,
  DollarSign,
  Shield,
  Lightbulb,
  Globe,
  Truck,
  Building,
  Users,
  FileText,
  TrendingUp
} from 'lucide-vue-next'

export default {
  name: 'ScenarioDemo',
  components: {
    User,
    Zap,
    Target,
    MessageSquare,
    CheckCircle,
    X,
    BarChart3,
    MapPin,
    DollarSign,
    Shield,
    Lightbulb,
    Globe,
    Truck,
    Building,
    Users,
    FileText,
    TrendingUp
  },
  
  setup() {
    const { ts } = useTranslation()
    const selectedScenario = ref(null)
    
    const scenarios = reactive([
      {
        id: 'brazil-manager',
        name: ts('国际投资经理'),
        description: ts('巴西投资开公司'),
        avatar: '🇧🇷',
        tags: [ts('投资'), ts('巴西'), ts('制造业')],
        profile: {
          name: ts('李明'),
          position: ts('巴西区域总经理'),
          company: ts('中巴投资有限公司'),
          background: ts('资深国际投资经理，拥有15年国际投资经验，专注于南美市场开发，计划在巴西建立汽车零部件制造基地'),
          stats: [
            { label: ts('投资规模'), value: '$5000万' },
            { label: ts('目标州'), value: '3个' },
            { label: ts('成功率'), value: '85%' },
            { label: ts('经验'), value: '15年' }
          ]
        },
        features: [
          {
            name: ts('巴西各州税收对比'),
            description: ts('对比分析巴西各州的税收政策和优惠措施'),
            icon: BarChart3,
            usage: ts('每日使用')
          },
          {
            name: ts('营商环境评估'),
            description: ts('基于世界银行数据的营商环境分析'),
            icon: MapPin,
            usage: ts('每周使用')
          },
          {
            name: ts('投资激励政策'),
            description: ts('匹配最适合的投资激励和优惠政策'),
            icon: DollarSign,
            usage: ts('每月使用')
          }
        ],
        recommendations: [
          {
            title: ts('圣保罗州制造业投资激励'),
            description: ts('圣保罗州政府为制造业企业提供税收减免和土地优惠'),
            priority: 'high',
            impact: ts('高'),
            benefit: '+25%',
            timeline: '3-6个月'
          },
          {
            title: ts('中巴产能合作协议'),
            description: ts('利用中巴双边协议获得更多政策支持'),
            priority: 'medium',
            impact: ts('中'),
            benefit: '+15%',
            timeline: '6-12个月'
          }
        ],
        chatDemo: [
          {
            sender: 'user',
            content: ts('我想了解巴西圣保罗州的制造业投资政策'),
            time: '10:30'
          },
          {
            sender: 'ai',
            content: ts('圣保罗州为制造业企业提供多项优惠政策：1)企业所得税减免25% 2)ICMS税率优惠 3)土地使用费减免。根据您的汽车零部件制造项目，预计可节省税费约800万雷亚尔。'),
            time: '10:31'
          },
          {
            sender: 'user',
            content: ts('具体的申请流程是什么？'),
            time: '10:32'
          },
          {
            sender: 'ai',
            content: ts('申请流程包括：1)提交投资计划书 2)环境影响评估 3)税务局审核 4)签署投资协议。整个流程预计需要4-6个月。我可以为您准备详细的申请材料清单。'),
            time: '10:33'
          }
        ]
      },
      {
        id: 'oxford-phd',
        name: ts('海归博士'),
        description: ts('博士后回国发展'),
        avatar: '🎓',
        tags: [ts('人才'), ts('科研'), ts('回国')],
        profile: {
          name: ts('张博士'),
          position: ts('博士后研究员'),
          company: ts('牛津大学'),
          background: ts('牛津大学环境科学博士，专注于大气监测技术研究，发表高水平论文28篇，希望回国继续从事环境科学研究'),
          stats: [
            { label: ts('发表论文'), value: '28篇' },
            { label: ts('引用次数'), value: '1,580' },
            { label: ts('匹配度'), value: '92%' },
            { label: ts('目标城市'), value: '5个' }
          ]
        },
        features: [
          {
            name: ts('各城市人才政策'),
            description: ts('对比分析各城市的人才引进政策和补贴标准'),
            icon: Users,
            usage: ts('每日使用')
          },
          {
            name: ts('科研资助查找'),
            description: ts('匹配适合的科研项目和资助机会'),
            icon: FileText,
            usage: ts('每周使用')
          },
          {
            name: ts('城市生活对比'),
            description: ts('综合评估各城市的生活成本和质量'),
            icon: MapPin,
            usage: ts('每月使用')
          }
        ],
        recommendations: [
          {
            title: ts('深圳市海外高层次人才"孔雀计划"'),
            description: ts('提供300万住房补贴和500万科研启动资金'),
            priority: 'high',
            impact: ts('高'),
            benefit: '+800万',
            timeline: '6-12个月'
          },
          {
            title: ts('中科院青年创新促进会'),
            description: ts('获得80万科研资助和导师指导'),
            priority: 'medium',
            impact: ts('中'),
            benefit: '+80万',
            timeline: '3-6个月'
          }
        ],
        chatDemo: [
          {
            sender: 'user',
            content: ts('我想了解深圳的人才政策，特别是对海外博士的支持'),
            time: '14:20'
          },
          {
            sender: 'ai',
            content: ts('深圳为海外高层次人才提供"孔雀计划"：住房补贴300万、科研启动资金500万、5年个税免征。基于您的学术背景，成功申请概率约为85%。'),
            time: '14:21'
          },
          {
            sender: 'user',
            content: ts('与北京相比如何？'),
            time: '14:22'
          },
          {
            sender: 'ai',
            content: ts('北京提供住房补贴200万、科研资金500万，但科研院所更多，竞争激烈。深圳政策更优惠，但北京学术氛围更浓厚。建议根据您的职业规划选择。'),
            time: '14:23'
          }
        ]
      },
      {
        id: 'ecommerce-park',
        name: ts('跨境电商产业园'),
        description: ts('产业园区运营'),
        avatar: '🏢',
        tags: [ts('电商'), ts('园区'), ts('运营')],
        profile: {
          name: ts('王园长'),
          position: ts('园区管理委员会主任'),
          company: ts('深圳跨境电商产业园'),
          background: ts('管理着华南地区最大的跨境电商产业园，园区面积15万平方米，入驻企业500家，年交易额超过120亿元'),
          stats: [
            { label: ts('入驻企业'), value: '500家' },
            { label: ts('年交易额'), value: '120亿' },
            { label: ts('园区面积'), value: '15万m²' },
            { label: ts('运营年限'), value: '6年' }
          ]
        },
        features: [
          {
            name: ts('产业园优惠政策'),
            description: ts('获取最新的园区优惠政策和扶持措施'),
            icon: Building,
            usage: ts('每日使用')
          },
          {
            name: ts('海关政策跟踪'),
            description: ts('实时跟踪海关政策变化和通关便利化措施'),
            icon: Shield,
            usage: ts('每日使用')
          },
          {
            name: ts('园区绩效分析'),
            description: ts('分析园区运营数据和政策利用效果'),
            icon: TrendingUp,
            usage: ts('每周使用')
          }
        ],
        recommendations: [
          {
            title: ts('跨境电商综合试验区政策'),
            description: ts('利用综试区政策优势，享受通关便利和税收优惠'),
            priority: 'high',
            impact: ts('高'),
            benefit: '+30%',
            timeline: '即时生效'
          },
          {
            title: ts('数字贸易试点政策'),
            description: ts('申请成为数字贸易试点园区，获得更多政策支持'),
            priority: 'medium',
            impact: ts('中'),
            benefit: '+20%',
            timeline: '3-6个月'
          }
        ],
        chatDemo: [
          {
            sender: 'user',
            content: ts('园区内企业反映出口退税手续繁琐，有什么解决方案？'),
            time: '16:45'
          },
          {
            sender: 'ai',
            content: ts('建议申请"单一窗口"出口退税试点，可将退税办理时间从15天缩短至3天。同时，园区可设立退税服务中心，提供一站式服务。'),
            time: '16:46'
          },
          {
            sender: 'user',
            content: ts('如何提高园区的政策利用率？'),
            time: '16:47'
          },
          {
            sender: 'ai',
            content: ts('建议：1)定期举办政策宣讲会 2)建立政策咨询热线 3)设立政策专员 4)建立政策利用台账。预计可将政策利用率提升至80%以上。'),
            time: '16:48'
          }
        ]
      },
      {
        id: 'mining-company',
        name: ts('矿业出口企业'),
        description: ts('海外矿业投资'),
        avatar: '⛏️',
        tags: [ts('矿业'), ts('出口'), ts('巴西')],
        profile: {
          name: ts('陈总'),
          position: ts('海外事业部总经理'),
          company: ts('中巴矿业集团'),
          background: ts('负责巴西铜矿开采业务，在米纳斯吉拉斯州经营两个矿场，年产铜矿石100万吨，员工2800人，年出口额8亿美元'),
          stats: [
            { label: ts('年产量'), value: '100万吨' },
            { label: ts('出口额'), value: '8亿美元' },
            { label: ts('员工数'), value: '2800人' },
            { label: ts('运营年限'), value: '8年' }
          ]
        },
        features: [
          {
            name: ts('矿业法规监管'),
            description: ts('跟踪巴西矿业法规变化和合规要求'),
            icon: Shield,
            usage: ts('每日使用')
          },
          {
            name: ts('出口程序优化'),
            description: ts('优化出口流程，降低贸易成本'),
            icon: Truck,
            usage: ts('每周使用')
          },
          {
            name: ts('环保合规监测'),
            description: ts('监测环保政策变化，确保合规运营'),
            icon: Globe,
            usage: ts('每月使用')
          }
        ],
        recommendations: [
          {
            title: ts('中巴矿业合作协议'),
            description: ts('利用双边协议享受贸易便利化和税收优惠'),
            priority: 'high',
            impact: ts('高'),
            benefit: '+12%',
            timeline: '即时生效'
          },
          {
            title: ts('绿色矿业认证'),
            description: ts('申请绿色矿业认证，获得环保补贴和品牌优势'),
            priority: 'medium',
            impact: ts('中'),
            benefit: '+8%',
            timeline: '6-12个月'
          }
        ],
        chatDemo: [
          {
            sender: 'user',
            content: ts('最近巴西环保部门检查频繁，我们需要注意什么？'),
            time: '09:15'
          },
          {
            sender: 'ai',
            content: ts('巴西新颁布的环保法规要求矿企必须：1)每月提交环境监测报告 2)建立废水处理系统 3)制定生态恢复计划。建议尽快完善相关设施和文件。'),
            time: '09:16'
          },
          {
            sender: 'user',
            content: ts('铜价波动对出口有影响，有什么风险管控措施？'),
            time: '09:17'
          },
          {
            sender: 'ai',
            content: ts('建议：1)使用期货套期保值 2)与客户签订长期合同 3)申请出口信贷保险 4)关注中巴汇率政策。可降低价格风险约30%。'),
            time: '09:18'
          }
        ]
      }
    ])
    
    // 功能对比数据
    const featureComparison = ref([
      { name: ts('税收政策分析'), brazil: true, oxford: false, ecommerce: true, mining: true },
      { name: ts('人才政策匹配'), brazil: false, oxford: true, ecommerce: false, mining: false },
      { name: ts('投资环境评估'), brazil: true, oxford: false, ecommerce: false, mining: true },
      { name: ts('海关政策跟踪'), brazil: false, oxford: false, ecommerce: true, mining: true },
      { name: ts('科研资助信息'), brazil: false, oxford: true, ecommerce: false, mining: false },
      { name: ts('合规风险监测'), brazil: true, oxford: false, ecommerce: true, mining: true },
      { name: ts('市场准入政策'), brazil: true, oxford: false, ecommerce: true, mining: true },
      { name: ts('城市生活对比'), brazil: false, oxford: true, ecommerce: false, mining: false }
    ])
    
    // 默认选择第一个场景
    selectedScenario.value = scenarios[0]
    
    return {
      ts,
      scenarios,
      selectedScenario,
      featureComparison
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.scenario-card {
  transition: all 0.3s ease;
}

.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
}

.text-electric-500 {
  color: #60a5fa;
}

.text-electric-300 {
  color: #93c5fd;
}

.bg-electric-500 {
  background-color: #60a5fa;
}

.bg-electric-500\/20 {
  background-color: rgba(96, 165, 250, 0.2);
}

.chat-simulation {
  max-height: 400px;
  overflow-y: auto;
}
</style> 